<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="jquery-2.2.4.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        html,body,ul,li {
            margin:0;
            padding:0;
            border:0;
            font-size:14px;
        }
        body {
            background-image:url(jing.jpeg);
        }
        ul {
            list-style-type:none;
        }
        #box {
            position:relative;
            width:604px;
            height:404px;
            border:1px solid red;
            top:150px;
            left:100px;
        }
        .picture { position:relative;}
        #box .picture li {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        #box .picture .current {
            opacity: 1;
            transform-origin:center center;
            animation-name:donghua;
            animation-duration:1s;
            animation-iteration-count:1;
        }
        @keyframes donghua {
            from {
                transform: rotate(200deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .num {
            position: absolute;
            bottom:10px;
            right:10px;
            z-index: 2;
        }
        .num li {
            float: left;
            width:20px;
            height:20px;
            margin-right:5px;
            cursor:pointer;
            text-align: center;
            line-height: 20px;
            color:white;
            background:red;
            opacity: 0.4;
            border-radius: 50%;
        }
        .zuo {
            width:50px;
            height:50px;
            position: absolute;
            top:170px;
            left:10px;
            opacity:0.4;
        }
        .you {
            width:50px;
            height:50px;
            position: absolute;
            top:170px;
            right:10px;
            opacity:0.4;
        }
        .small {
            position: absolute;
            bottom:80px;
            left:10px;
        }
        .small img {
            margin-right: 15px;
            width:150px;
            height:100px;
            opacity: 0.5;
        }
        .small .on {
            transform-origin:center center;
            animation-name:donghua2;
            animation-duration:1s;
            animation-iteration-count:1;
        }
        @keyframes donghua2 {
            from {
                transform: rotate(200deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="picture">
        <li class="current"><img src="0.jpg" alt=""/></li>
        <li><img src="1.jpg" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="3.jpg" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
    </ul>
    <ul class="num">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <img src="zuo.png" alt="" class="zuo"/>
    <img src="you.png" alt="" class="you"/>
</div>
<div class="small">
    <img src="0.jpg" alt="" class="on"/>
    <img src="1.jpg" alt=""/>
    <img src="2.jpg" alt=""/>
    <img src="3.jpg" alt=""/>
    <img src="4.jpg" alt=""/>
</div>
</body>
</html>
<script>
    var box = document.querySelector('.picture');
    var zuo = document.querySelector('.zuo');
    var you = document.querySelector('.you');
    var list = document.querySelectorAll('.picture li');
    var num = document.querySelectorAll('.num li');
    var sma = document.querySelectorAll('.small img');
    var pm = 0;
    function show(a){
        for(var i=0;i<list.length;i++){
            list[i].style.opacity = '0';
            list[i].className = '';
            sma[i].style.opacity = '0.5';
            sma[i].className = '';
           num[i].style.opacity = '0.4';
        }
        list[a].style.opacity = '1';
        list[a].className = 'current';
        sma[a].style.opacity = '1';
        sma[a].className = 'on';
       num[a].style.opacity = '1';
    }
    //手动的效果
    for(var i=0;i<num.length;i++){
        num[i].index = i;
        num[i].addEventListener('mouseover',function(){
            clearInterval(timer);
            this.style.opacity = '1';
            show(this.index);
        });
        num[i].addEventListener('mouseout',function(){
            this.style.opacity = '0.5';
            autoplay();
        })
    }
    //自动的效果
    function autoplay(){
        timer = setInterval(function(){
            pm++;
            if(pm>=list.length){
                pm = 0;
            }
            show(pm)
        },4000);
    }
    autoplay();
    zuo.addEventListener('click',function(){
        pm--;
        pm<0? pm=0:pm;
        show(pm);
    });
    you.addEventListener('click',function(){
        pm++;
        pm>=5? pm=0:pm;
        show(pm);
    });
    box.addEventListener('mouseover',function(){
        clearInterval(timer);
    });
    box.addEventListener('mouseout',function(){
        autoplay();
    })
</script>